import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, FlatList, View, StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
import Colors from "../../util/Colors";
import PlayListItem from "../PlayListItem/PlayListItem";


export default function(props) {
  //console.log(props.songs);

  const _onItemPress = item => {
    //console.log('_onItemPressed: ' + JSON.stringify(item));
    props.navigation.navigate('ListDetail',{item:{...item,isSinger:true}});
  };


  const _renderItem = ({index,item}) => {
    if (props.more && props.search && props.songs && index === props.songs.length - 1) {
      let a= {};
      a.id = '-123'
      a.name='点击加载更多......'
      return(
        <>
          <PlayListItem item={item} onPress={_onItemPress} />
          <PlayListItem item={a} onPress={props.onMore} />
        </>
      )
    }else {
      return(
        <PlayListItem item={item} onPress={_onItemPress} />
      )
    }

  };

  if (props.isLoading || props.songs == null) {
    return (
      <View style={[{flex: 1, justifyContent: 'center'},props.style]}>
        <ActivityIndicator
          size={46}
          color={Colors.colorLight}
          animating={true}
        />
      </View>
    );
  }
  return (
    <View style={styles.container}>
      {props.loading &&
        <View style={[{position:'absolute',top:height/2, left:width/2-23},props.style]}>
          <ActivityIndicator
            size={46}
            color={Colors.colorLight}
            animating={true}
          />
        </View>
      }
      <FlatList
        data={props.songs}
        renderItem={_renderItem}
        numColumns={2}
        keyExtractor={(item, index) => index.toString()}
      />

    </View>
  );

}

const itemHeight = 70; // 如果可以确定高度，免去了渲染计算高度
const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  /* separator: {
    width: screen.width - 20,
    height: 1,
    alignSelf: 'center',
    backgroundColor: '#eeeeee',
    borderStyle: 'dotted',
  }, */
});
